<template>
    <div :class = "isShow ? 'disp-alert':'noAlert'">
      <div class = "alert-descrip">
        <div v-show = "alertId === 230">
          <img src = "../assets/AlarmIcon.png" v-show = "alertId === 230">
          <span>
           {{alertText}}
         </span>
        </div>
      </div>

      <div class = "alert-operate">
        <img src = "../assets/AlarmBtn.png">
          <span>
            Aclnowledge
          </span>
      </div>
    </div>
</template>

<script>
  import AlertData from '../utils/echo-alert-data'
  export default {
    data () {
      return {
        isShow: false,
        alertId: 201101
      }
    },
    computed: {
      alertText: function () {
        return AlertData.getAlertText(this.alertId)
      }
    }
  }
</script>

<style lang = "less">
  .noAlert {
    display: none;
  }

  .disp-alert {
    display: inline-block;
    position: relative;
    top: -500px;
    border: 1px solid;
    width: 400px;
    font-size: 20px;
  }

  .alert-descrip {
    color: red;
  }
  .depth-below-keel {
  }

  .alert-operate {
    border-top: 1px solid ;
  }
</style>
